<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>选课界面</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <style>
        #userNa{
            margin-left: 1400px;
        }
        #btns{
            margin-left: 1400px;
        }
    </style>
</head>
<body>
<script type="text/javascript" th:src="@{/layui/layui.all.js}"></script>
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<p id="userNa" th:text="'loginName:'+${userName}"></p>
<form method="POST" th:action="@{/logout}" id="logoutForm">
    <button type="submit" id="btns" class="layui-btn layui-btn-danger layui-btn-radius">退出登录</button>
</form>
<form class="layui-form" action="/displaySelect">
    <table class="layui-table" id="allCourse" lay-filter="example">
        <colgroup>
            <col width="50">
            <col width="200">
            <col width="150">
            <col width="150">
            <col width="150">
        </colgroup>
        <thead>
        <tr>
            <th>课程编号</th>
            <th>课程名称</th>
            <th>课程教师</th>
            <th>课程剩余可选人数</th>
            <th>选课</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="cour:${courseList}">
            <td id="couseNo" th:text="${cour.couNo}"></td>
            <td id="conseName" th:text="${cour.couName}"></td>
            <td id="teachName" th:text="${cour.teacher.teaName}"></td>
            <td id="courseRem" th:text="${cour.couRem}"></td>
            <td id="selectOr">
                <div class="layui-form-item">
                    <input type="checkbox" name="selCou" lay-skin="switch" lay-text="ON|OFF" th:value="${cour.couNo}"
                           checked>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" id="LAY-component-form-getval" lay-submit lay-filter="formDemo"
                    onclick="getTableContent()">立即提交
            </button>
        </div>
    </div>
</form>
<script>

    layui.use('table', 'form', function () {
        var table = layui.table;
        var form = layui.form;
        table.render({})
        //利用js读取表格数据，将数据按json格式传给后台
    });
    // function getTableContent(){
    //     var mytable = document.getElementById("allCourse");
    //     var data = [];
    //     for(var i=0,rows=mytable.rows.length; i<rows; i++){
    //         for(var j=0,cells=mytable.rows[i].cells.length; j<cells; j++){
    //             if(!data[i]){
    //                 data[i] = new Array();
    //             }
    //             data[i][j] = mytable.rows[i].cells[j].innerText;
    //             alert(data[i][j]);
    //         }
    //     }
    //     return data;
    // }
</script>
</body>
</html>